<template>
	<view>
		<u-sticky  h5-nav-height="48">
			<view class="sticky">
				<u-tabs class="utabs" :list="tabs" :is-scroll="false" :current="current1" @change="change"></u-tabs>
			</view>
		</u-sticky>
		<view>
			<systemlist-components v-if="current1==0" :data="systemlist"></systemlist-components>
			<systemlist1-components v-if="current1==1" :data="systemlist1"></systemlist1-components>
		</view>

		<u-tabbar v-model="current" :list="tabbar" :mid-button="false"></u-tabbar>
	</view>
</template>

<script>
	export default {
		computed: {
			tabbar() {
				return this.$store.state.tabbar
			}
		},
		data() {
			return {
				current: 1,
				systemlist: [],
				systemlist1: [],
				tabs: [{
					name: '体系'
				}, {
					name: '导航'
				}],
				current1: 0,
				topheight: 0, //吸顶高度
			}
		},
		// created() {
		// 	this.getTopHeight();
		// },
		methods: {
			getData(index) {
				if (index == 0) {
					this.$u.get('/tree/json').then((res) => {
						this.systemlist = []
						this.systemlist = [...this.systemlist, ...res.data]
						console.log('成功');
						this.current1 = 0;
					}).catch((res) => {
						console.log('失败');
					})
				} else {
					// navi/json
					this.$u.get('/navi/json').then((res) => {
						this.systemlist = []
						this.systemlist1 = [...this.systemlist1, ...res.data]
						console.log('成功');
						this.current1 = 1;
					}).catch((res) => {
						console.log('失败');
					})
				}


			},
			change(index) {
				this.current1 = index;
				this.getData(index);
			},
			//获取顶部距离
			getTopHeight() {
				let that = this;
				uni.getSystemInfo({
					success: function(e) {
						//48为自定义导航栏高度，一般为44
						let topPx = e.statusBarHeight + 48 // 顶部状态栏+沉浸式自定义顶部导航
						that.topheight = topPx / (uni.upx2px(topPx) / topPx) // px转rpx，这里必须转化为rpx，不然适配失败

					},
				});
			},
		},

		onLoad: function(option) {
			// this.page = option.page;
			// this.page_size = option.page_size;
			// this.articlelist = option.articlelist;
			this.getData(0);
			this.getTopHeight();
		}


	}
</script>

<style>
	.sticky {
			width: 750rpx;
			height: 120rpx;
			background-color: #2979ff;
			color: #fff;
			padding: 24rpx;
			margin-top: -10rpx;
		}

</style>
